<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-header width="200px">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item index="/">Processing Center</el-menu-item>
        <el-menu-item index="/auto">Orders</el-menu-item>
      </el-menu>
    </el-header>

    <el-container>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>

  <audio ref="musicAudio" loop>
    <source src="../assets/双手插兜.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>

  <Confirm :visible="confirmVisible" @close="confirmVisible = false" @confirm="confirm">
    <span>开启带劲的 mussic 吗?</span>
  </Confirm>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Confirm from '../components/Confirm.vue'

const activeIndex2 = ref('/')
const router = useRouter()
const handleSelect = (key) => {
  console.log(key)
  // activeIndex2.value = key
  router.push(key)
}

const confirmVisible = ref(true)
const musicAudio = ref()
// 播放音乐
function confirm() {
  musicAudio.value.play()
  confirmVisible.value = false
}
</script>

<style scoped>
.el-header {
  width: 100%;
  padding: 0;
  margin: -8px -8px 0 -8px;
  position: fixed;
  z-index: 99;
}
.el-main {
  padding-top: 68px;
}
</style>
